import React, { Component } from 'react'
import { Form, Input, Button, Checkbox } from 'antd'
import {BrowserRouter as Router, Switch, Redirect, Route, Link} from 'react-router-dom'
// import Home from '../Home/Home'
import 'antd/dist/antd.css'
import './Login.css'
import Icon from '@ant-design/icons';

class Login extends Component {
  state={
    usrinfo:{usr:'',pwd:''}
  }

  reqt=(usr,pwd)=>{
    console.log(usr,pwd)
    fetch('https://wx.original5.xyz:2003/login',{
      method:'POST', 
      // mode:'cors',
      headers:{
        // 'Content-Type':'application/json'
        'Content-Type':'application/json;charset=UTF-8',
      },
      body:JSON.stringify({
        username:usr,
        password:pwd
      })
    }).then(res=>{ return res.json()})
    .then(res=>{
      console.log(111,res)
      if(res.length){
        console.log('登陆成功')
        this.state.usrinfo.usr=usr;
        this.state.usrinfo.pwd=pwd;
        localStorage.setItem('usrinfo',JSON.stringify(this.state.usrinfo))
        return (
          this.props.history.replace('/')
          // <Link to='/' />
          // <Redirect to='/home'/>
        )
      }else{
        alert('用户名或密码有误')
      }
    })
  }
  

  render() {

    const onFinish = (values: any) => {
      console.log('Success:', values);
      var usr=values.username;
      var pwd=values.password
      this.reqt(usr,pwd)
    };
  
    const onFinishFailed = (errorInfo: any) => {
      console.log('Failed:', errorInfo);
    };

    return (
      <div className="login" style={{minHeight:'100vh'}}>
        <div className="login-header">
          <h1 style={{marginLeft:80}}>独白&nbsp;后台管理系统</h1>
        </div>
        <div className="login-content">
          <h1>管理员登陆</h1>

          <Form
            name="basic"
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
            initialValues={{ remember: true }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
            className="login-form"
          >
            <Form.Item
              label="用户名"
              name="username"
              rules={[{ required: true, message: '用户名不得为空!' }]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="密码"
              name="password"
              rules={[{ required: true, message: '密码不能为空!' }]}
            >
              <Input.Password />
            </Form.Item>

            <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 16 }}>
              <Checkbox >记住密码</Checkbox>
            </Form.Item>

            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
              <Button type="primary" htmlType="submit" style={{backgroundColor:'#905037'}} className="login-form-button">
                登 录
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    )
  }
}

export default Login
